<script setup>
import { computed, ref } from 'vue'
import store from '@/store/index.js'
import { config } from '@/common/config.js'

// 用户信息
const userInfo = computed(() => store.state.userinfo)
const userAvatar = computed(() => config.baseUrl + store.state.userinfo.avatar)
store.dispatch('getUserInfo')

// 菜单列表 - 优化配色方案
const menuList = ref([{
	text: '修改密码',
	icon: 'icon-xiugaimima',
	bgColor: '#FF9A9E', // 温暖红色系
	url: '/pages/user/editPassword'
},
{
	text: '个人中心',
	icon: 'icon-gerenziliao',
	bgColor: '#7BB3FF', // 清新蓝色系
	url: '/pages/user/editInfo'
},
{
	text: '咨询服务',
	icon: 'icon-zixunfuwu-01',
	bgColor: '#97C1A9', // 自然绿色系
	url: '/pages/consult/index'
},
{
	text: '客户评价',
	icon: 'icon-pingjia',
	bgColor: '#FFBF86', // 活力橙色系
	url: '/pages/consult/score'
},
])

// 菜单点击
const handleMenuClick = (item) => {
	uni.navigateTo({
		url: item.url
	})
}

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: async (res) => {
			if (res.confirm) {
				store.dispatch('logout')
			}
		}
	})
}

const uploadAvatar = () => {
	uni.chooseImage({
		count: 1,
		success: async (res) => {
			try {
				const tempFilePaths = res.tempFilePaths
				await uni.uploadFile({
					url: config.baseUrl + '/system/user/profile/avatar',
					filePath: tempFilePaths[0],
					name: 'avatarfile',
					header: {
						'Authorization': store.state.token
					}
				})
				store.dispatch('getUserInfo')
			} catch (e) {
				uni.$u.toast(e?.msg || '上传失败')
			}

		},
		fail: (fail) => {
			uni.$u.toast('上传失败')
		},
	})
}

</script>

<template>
	<view class="user-center">
		<!-- 头部用户信息 -->
		<view class="profile-header flex_fd">
			<!-- 背景头像模糊层 -->
			<view class="avatar-bg" :style="{ backgroundImage: 'url(' + userAvatar + ')' }"></view>
			<!-- 头像 -->
			<image class="avatar" @click="uploadAvatar" :src="userAvatar" mode="aspectFill" />
			<!-- 用户信息 -->
			<view class="user-info">
				<text class="username">{{ userInfo.nickName }}</text>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item flex_sb" v-for="item in menuList" :key="item.text" @click="handleMenuClick(item)">
				<view class="menu-left">
					<view class="menu-icon" :style="{ backgroundColor: item.bgColor }">
						<text class="iconfont" :class="item.icon"></text>
					</view>
					<text class="menu-text">{{ item.text }}</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 退出按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<style lang="scss">
.user-center {
	min-height: 100vh;
	background-color: #f5f7fa;
}

/* 头部样式 */
.profile-header {
	position: relative;
	color: #fff;
	padding: 100rpx 0 40rpx;
	overflow: hidden;

	/* 背景头像模糊效果 */
	.avatar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transform: scale(1.1);
		filter: blur(4rpx);
		/* 减少模糊度，让背景更清晰可见 */
		z-index: 1;

		/* 渐变蒙版降低透明度，增强背景可见性 */
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
		}
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 6rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
		z-index: 2;
		transition: transform 0.3s ease;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		z-index: 2;

		.username {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		}

		.user-desc {
			font-size: 26rpx;
			opacity: 0.95;
			text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
		}
	}
}

/* 菜单列表 */
.menu-list {
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.03);
	overflow: hidden;

	.menu-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: all 0.3s;


		&:last-child {
			border-bottom: none;
		}

		.menu-left {
			display: flex;
			align-items: center;
		}

		.menu-icon {
			width: 70rpx;
			height: 70rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;

			.iconfont {
				color: #fff;
				font-size: 38rpx;
			}
		}

		.menu-text {
			font-size: 30rpx;
			color: #333;
		}

		.icon-right {
			color: #999;
			font-size: 28rpx;
		}
	}
}

/* 退出按钮 */
.logout-btn {
	margin: 40rpx 30rpx 0;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 16rpx;
	color: #ff6b6b;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.03);
	transition: all 0.3s;

	&:active {
		background: #fff5f5;
	}
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.menu-item {
	animation: fadeIn 0.5s ease forwards;
	opacity: 0;

	@for $i from 1 through 10 {
		&:nth-child(#{$i}) {
			animation-delay: $i * 0.1s;
		}
	}
}
</style>